<template>
  <div class="box">
    <div class="tabs">
      <div class="tabs-left">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane
            v-for="item in memberList.value"
            :label="item.name"
            :name="item.name"
          >
            <template #label>
              <span class="custom-tabs-label" @click="handleClick(item)">
                <span>{{ item.name }}</span>
              </span>
            </template>
            <div
              class="list-content"
              v-for="item1 in billboardList.value"
              @click="handleClick1(item1.id)"
            >
              <!-- {{ item1 }} -->
              <div class="list-left">
                <img :src="ip + item1.image" alt="" />
              </div>
              <div class="list-right">
                <div class="list-t1">{{ item1.title }}</div>
                <div class="list-t2">{{ item1.new_content }}</div>
                <div class="list-time">
                  <img src="../../assets/img/组 5381@2x.png" alt="" />{{
                    item1.startdate
                  }}
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 50, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div style="width: 100%; height: 40px; background-color: #f6f6f6"></div>
      </div>
      <div class="tabs-right">
        <div class="popularArticles">
          <div class="top">
            <img src="../../assets/img/组 5391@2x.png" alt="" />
            <div class="top-title">热门文章</div>
          </div>
          <div class="heng"></div>
          <div
            class="content"
            v-for="(item, index) in popularList.value"
            :key="index"
          >
            <div
              class="Number"
              :class="{ active: index == 0 || index == 1 || index == 2 }"
            >
              {{ index + 1 }}
            </div>
            <div class="content-1" @click="Jump(item.id)">{{ item.title }}</div>
          </div>
          <div style="width: 100%; height: 15px"></div>
        </div>
        <div class="popularArticles" style="margin-top: 10px">
          <div class="top">
            <img src="../../assets/img/路径 4300@2x.png" alt="" />
            <div class="top-title">热门地区</div>
          </div>
          <div class="heng"></div>
          <div class="area-content">
            <div class="area"><a href="https://anhui.6ocbx.com">安徽</a></div>
            <div class="area"><a href="https://beijing.6ocbx.com">北京</a></div>
            <div class="area">
              <a href="https://shanghai.6ocbx.com">上海</a>
            </div>
            <div class="area">
              <a href="https://guangdong.6ocbx.com">广东</a>
            </div>
            <div class="area">
              <a href="https://shenzhen.6ocbx.com">深圳</a>
            </div>
            <div class="area"><a href="https://tianjin.6ocbx.com">天津</a></div>
          </div>
          <!-- <div style="width: 100%;height: 15px;"></div> -->
        </div>
      </div>
    </div>
  </div>
  <Fot></Fot>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useCounterStore } from "../../pain/doc/index";
import Fot from "../../components/fotter/index.vue";

import {
  classification,
  informationDetails,
  informationList,
} from "../../Api/doc/index.js";

// postList()
const ip = ref("https://api.6ocbx.com/");
// 标签页
const activeName = ref("标讯百科");
const memberList = reactive([]);
classification().then((res) => {
  if (res.data.code == 1) {
    memberList.value = res.data.data;
  } else {
    ElMessage.error(res.data.msg);
  }
});
const handleClick = (event) => {
  if (event.id == 1) {
    router.push({
      path: "/doc",
    });
  } else if (event.id == 2) {
    router.push({
      path: "/selected",
    });
  }
};
//跳转详情
const router = useRouter();

router.beforeEach((to, from) => {
  // console.log('当前路由地址', to.path);
  // console.log(from.path.toString());
  if (from.path.toString().indexOf("article") != -1) {
    const aaa = useCounterStore();
    if (aaa.type == 1) {
      console.log("111");
      classify_id.value = 1;
      postList();
    }
    if (aaa.type == 2) {
      console.log("222");
      classify_id.value = 2;
      postList();
    }
    if (aaa.type == 3) {
      console.log("333");
      classify_id.value = 3;
      postList();
    }
  }
});
const handleClick1 = (event) => {
  router.push({
    path: `/article/${event}`,
  });
  // console.log(event);
};
//分页
const currentPage = ref();
const pageSize4 = ref();
const small = ref(false);
const disabled = ref(false);
const background = ref(false);
const count = ref("0");
const handleSizeChange = (val) => {
  size.value = val;
  postList();
  // console.log(`${val} items per page`)
};
const handleCurrentChange = (val) => {
  page.value = val;
  postList();
  // console.log(`current page: ${val}`)
};
const Jump = (event) => {
  router.push({
    path: `/article/${event}`,
  });
};

//标讯列表
const classify_id = ref(1);
const page = ref(1);
const size = ref(10);
const billboardList = reactive([]);
const postList = () => {
  const form = reactive({
    classify_id: 3,
    page: page,
    size: size,
  });
  informationList(form).then((res) => {
    if (res.data.code == 1) {
      count.value = res.data.data.count;
      billboardList.value = res.data.data.list;
      popularList.value = res.data.data.hot_list;
      // console.log(billboardList.value);
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
postList();
// const billboardList = reactive([
//   {id:1,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
//   {id:2,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
//   {id:3,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
//   {id:1,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
//   {id:2,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
//   {id:3,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
//   {id:1,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
//   {id:2,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
//   {id:3,title:"成都市锦江区统一建设有限公司正在进行8512万元改造工程采购",title1:"近日，成都市锦江区统一建设有限公司宣布将进行一项总金额达8512万元的改造工程采购。这是成都市锦江区统一建设有限公司最新的采购项目，也是该公司在市场竞争中的最新动态。成都市锦江区…",time:"2023-12-29"},
// ])

//热门文章
const popularList = reactive([]);
//热门地区
const areaList = reactive([
  { title: "北京地区" },
  { title: "上海地区" },
  { title: "上海地区" },
  { title: "广东地区" },
  { title: "江苏地区" },
  { title: "河北地区" },
  { title: "吉林地区" },
  { title: "辽宁地区" },
  { title: "安徽地区" },
]);
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  background-color: #f6f6f6;
}
.tabs {
  width: 1200px;
  height: 100%;
  margin: 10px auto;
  display: flex;
}
.tabs-left {
  width: 100%;
  // height: 100vh;
  // background-color: #FFFFFF;
}
.el-tabs {
  width: 930px;
  // height: 300px;
  background-color: #fff;
  padding-bottom: 20px;
}
.tabs-right {
  width: 260px;
  height: 100%;
  margin-left: 10px;
}
.popularArticles {
  width: 260px;
  // height: 244px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  // display: flex;
  padding: 0 10px;
}
.top {
  // width: 260px;
  height: 56px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  display: flex;
  // border-right: 1px solid #DDD;
  img {
    width: 14px;
    height: 16px;
    margin-top: 20px;
  }
}
.el-pagination {
  width: 100%;
  padding-left: 20px;
  background-color: #fff;
  // padding-bottom: 40px;
}
.top-title {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 56px;
  color: #333333;
  margin-left: 9px;
  opacity: 1;
}
.heng {
  width: 240px;
  height: 1px;
  background: #dddddd;
  opacity: 1;
  border-radius: 0px;
}
.content {
  width: 100%;
  display: flex;
  margin-top: 11px;
}
.Number {
  width: 18px;
  height: 18px;
  background: #eeeeee;
  opacity: 1;
  border-radius: 2px;
  text-align: center;
}
.active {
  width: 18px;
  height: 18px;
  background: #f43107;
  opacity: 1;
  border-radius: 2px;
  text-align: center;
  color: #fff;
}
.content-1 {
  width: 213px;
  height: 15px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #333333;
  opacity: 1;
  overflow: hidden; //溢出隐藏
  white-space: nowrap; //禁止换行
  text-overflow: ellipsis; //...
  margin-left: 6px;
}
.area {
  display: inline-block;
}
.area-content {
  width: 100%;
  height: 115px;
  // padding: 20px 0;
}
.area {
  width: 56px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #333333;
  opacity: 1;
  margin: 15px 12px 0 12px;
}
.list-content {
  width: 100%;
  // height: 170px;
  display: flex;
  padding: 20px 0;
  border-top: 1px solid #ddd;
  // margin: 5px 0;
  // padding-bottom: 15px;
}
.list-left {
  width: 250px;
  height: 132px;
  img {
    width: 100%;
    height: 100%;
  }
}
.list-right {
  width: 620px;
  margin-left: 20px;
  position: relative;
}
.list-t1 {
  // width: 510px;
  height: 18px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 20px;
  color: #333333;
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 10px;
}
.list-t2 {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 28px;
  color: #a9b1be;
  opacity: 1;
  display: -webkit-box; /* 必须设置display属性为-webkit-box */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  -webkit-line-clamp: 2; /* 限制显示两行 */
  -webkit-box-orient: vertical; /* 垂直方向上的换行 */
}
.list-time {
  // width: 72px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #a9b1be;
  opacity: 1;
  position: absolute;
  bottom: 4px;
  img {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    margin-top: -3px;
  }
}
:deep() {
  .el-tabs__nav {
    margin-left: 40px;
    height: 56px;
    line-height: 56px;
  }
  .el-tabs__item {
    height: 56px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #a9b1be;
    opacity: 1;
    margin-right: 50px;
    padding: 0;
  }
  .is-active {
    color: #f43107;
  }
  .el-tabs__header {
    margin: 0;
  }
  // .el-tabs__nav-scroll{

  // }
  .el-tabs__content {
    margin: 0 20px;
  }
}
</style>
